<template>
    <div class="app-container home" v-loading="loading">
        <el-row :gutter="24" style="height:70px" class="board-header">
            <span class="show-method" title="切换内部模式" v-if="showMethod==='customerModel'" @click="showMethod='internalModel';getList()"><i class="el-icon-s-custom" style="font-size: 18px;"></i></span>
            <span class="show-method" title="切换客户模式" v-if="showMethod!=='customerModel'" @click="showMethod='customerModel';getList()"><i class="el-icon-monitor" style="font-size: 18px;"></i></span>
            <img src="~@/assets/images/board/tittle.png" style="width:236px;height: 36px;" />
            <el-select v-model="factoryName" class="show-factory" :placeholder="$t('public.select_holder',{select_holder: $t('inspectionManagement.plantArea')})" style="width:152px;" filterable clearable size="small">
                <el-option key="0" label="全部" value="" />
                <el-option v-for="(item) in factoryList" :key="item.factoryName" @click.native="getList()" :label="item.factoryName" :value="item.factoryName" />
            </el-select>
            <div class="board-time">{{boardTime}} {{ nowWeek }}</div>
        </el-row>
        <div style="margin-bottom:0px;padding:19px 17px;">
            <el-row :gutter="24" style="margin-bottom:20px">
                <el-col :span="24">
                    <div class="chart-card" style="height:auto">
                        <div class="card-title">
                            <div class="title-left">进料看板</div>
                        </div>
                        <el-table :data="detailList" :row-style="rowStyle" height="36vh" style="margin-top:5px;margin-left:2px">

                            <el-table-column label="到货日期" :render-header="remarkRenderHeader" align="left" width="140" prop="cpudt" :show-overflow-tooltip="true" />
                            <el-table-column :label="$t('inventoryManagement.inventoryManagement')" :render-header="remarkRenderHeader" align="left" width="120" prop="materialCode" :show-overflow-tooltip="true" />
                            <el-table-column :label="$t('material.materialName')" :render-header="remarkRenderHeader" align="left" width="120" prop="materialName" :show-overflow-tooltip="true" />
                            <el-table-column label="供应商名称" :render-header="remarkRenderHeader" align="left" width="160" prop="supplierName" :show-overflow-tooltip="true" />

                            <el-table-column :label="$t('inventoryManagement.supplierNo')" :render-header="remarkRenderHeader" align="left" prop="supplierCode" width="120" :show-overflow-tooltip="true" />
                            <el-table-column :label="$t('inventoryManagement.inspectionBatchNo')" :render-header="remarkRenderHeader" align="left" prop="inspectionLotMark" width="140" />
                            <el-table-column :label="$t('inventoryManagement.purchase')" :render-header="remarkRenderHeader" width="90" align="center" prop="requisitioner" :show-overflow-tooltip="true" />
                            <!-- <el-table-column label="检验项进度" align="left" width="120" prop="ebeln" :show-overflow-tooltip="true" /> -->
                            <!-- <el-table-column label="检验开始时间"   align="left" minWidth="120" prop="ebeln" :show-overflow-tooltip="true" /> -->
                            <el-table-column label="批数量" :render-header="remarkRenderHeader" align="left" width="80" prop="batchAmount" :show-overflow-tooltip="true" />
                            <el-table-column label="单位" :render-header="remarkRenderHeader" align="left" width="80" prop="mengeneinh" :show-overflow-tooltip="true" />
                            <el-table-column :render-header="remarkRenderHeader" :label="$t('inventoryManagement.factory')" align="left" prop="factoryName" width="180" :show-overflow-tooltip="true" />

                            <el-table-column :render-header="remarkRenderHeader" :label="$t('inventoryManagement.rejectReason')" align="left" prop="rejectReason" :show-overflow-tooltip="true" />
                        </el-table>
                    </div>
                </el-col>
                <!-- <el-col :span="12">
                    <div class="chart-card fast">
                        <div class="card-title">
                            <div class="title-left">加急看板</div>
                        </div>
                        <el-table :data="detailList" :row-style="rowStyle" :height="270" style="margin-top:5px">

                            <el-table-column label="到货日期" :render-header="fastRenderHeader" align="left" width="140" prop="cpudt" :show-overflow-tooltip="true" />
                            <el-table-column label="物料编号" :render-header="fastRenderHeader" align="left" width="100" prop="materialCode" :show-overflow-tooltip="true" />
                            <el-table-column label="物料名称" :render-header="fastRenderHeader" align="left" minWidth="120" prop="materialName" :show-overflow-tooltip="true" />
                            <el-table-column label="供应商名称" :render-header="fastRenderHeader" align="left" width="120" prop="supplierName" :show-overflow-tooltip="true" />
                            <el-table-column label="批数量" :render-header="fastRenderHeader" align="left" width="80" prop="batchAmount" :show-overflow-tooltip="true" />
                            <el-table-column label="单位" :render-header="fastRenderHeader" align="left" width="80" prop="mengeneinh" :show-overflow-tooltip="true" />
                        </el-table>
                    </div>
                </el-col> -->
            </el-row>
            <el-row :gutter="24" style="margin-bottom:20px;">
                <el-col :span="12">
                    <div class="chart-card" style="height:35vh">
                        <div class="card-title chart-flex">
                            <div class="title-left" style="flex:0.4">来料合格率</div>
                            <!-- <div class="chart-date" style="flex:0.4;padding-top:4px">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="dateRange" @change="getSecond" type="daterange" :range-separator="$t('structureAnalysis.to')" size="mini" :start-placeholder="$t('public.startDate')" :end-placeholder="$t('public.endDate')">
                                </el-date-picker>
                            </div>
                            <div style="flex:0.2;padding-top:8px;">
                                <div style="position:relative;right:0px">
                                    <a :class="dateType==='0'?'current-date':'default-date'" @click="dateType='0';getSecond()">日</a>
                                    <a :class="dateType==='1'?'current-date':'default-date'" @click="dateType='1';getSecond()">周</a>
                                    <a :class="dateType==='2'?'current-date':'default-date'" @click="dateType='2';getSecond()">月</a>
                                    <a :class="dateType==='3'?'current-date':'default-date'" @click="dateType='3';getSecond()">年</a>
                                </div>
                            </div> -->

                        </div>
                        <bar-chart :chartData="chartData" height="80%" width="100%" />
                    </div>
                </el-col>
                <el-col :span="12" v-if="showMethod==='customerModel'">
                    <div class="chart-card" style="height:35vh">
                        <div class="card-title chart-flex">
                            <div class="title-left" style="flex:0.4">检验及时率</div>
                            <!-- <div class="chart-date" style="flex:0.4;padding-top:4px">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="dateRange2" @change="getTimeData" type="daterange" :range-separator="$t('structureAnalysis.to')" size="mini" :start-placeholder="$t('public.startDate')" :end-placeholder="$t('public.endDate')">
                                </el-date-picker>
                            </div>
                            <div style="flex:0.2;padding-top:8px;">
                                <div style="position:relative;right:0px">
                                    <a :class="dateType2==='0'?'current-date':'default-date'" @click="dateType2='0';getTimeData()">日</a>
                                    <a :class="dateType2==='1'?'current-date':'default-date'" @click="dateType2='1';getTimeData()">周</a>
                                    <a :class="dateType2==='2'?'current-date':'default-date'" @click="dateType2='2';getTimeData()">月</a>
                                    <a :class="dateType2==='3'?'current-date':'default-date'" @click="dateType2='3';getTimeData()">年</a>
                                </div>
                            </div> -->

                        </div>
                        <time-rate-chart :chartData="timeData" height="80%" width="100%" />
                    </div>
                </el-col>
                <el-col :span="12" v-if="showMethod==='internalModel'">
                    <div class="chart-card" style="height:35vh">
                        <div class="card-title chart-flex">
                            <div class="title-left" style="flex:0.6">供应商不良PPM</div>
                            <!-- <div class="chart-date" style="flex:0.4;padding-top:4px">
                                <el-date-picker value-format="yyyy-MM-dd" v-model="dateRange3" @change="supplierPpm" type="daterange" :range-separator="$t('structureAnalysis.to')" size="mini" :start-placeholder="$t('public.startDate')" :end-placeholder="$t('public.endDate')">
                                </el-date-picker>
                            </div> -->

                        </div>
                        <supplier-chart :chartData="supplierData" height="80%" width="100%" />
                    </div>
                </el-col>
            </el-row>
        </div>

        <!-- </el-col>
        </el-row> -->
    </div>
</template>

<script>
// import EnjoySelectClient from '@/components/EnjoySelectClient'
// import EnjoySelectPart from '@/components/EnjoySelectPart'
import {listInventory} from '@/api/inventoryManagement/inspectedInventory'
import {getSMForCheckInTimeChart, getSMForTwoTimesQualifiedChart, supplierPpm,} from '@/api/basic/analysiss'
import {listAllFactory} from '@/api/basic/factory'
import BarChart from './BarChart'
import timeRateChart from './timeRateChart'
import supplierChart from './supplierChart'

export default {
    name: 'Index',
    components: {
        BarChart,
        timeRateChart,
        supplierChart,
    },
    data() {
        return {
            // 版本号
            version: '3.2.0',
            nowWeek: this.getNowWeek(),
            showMethod: 'customerModel',
            chartData: {},
            badQualityData: [],
            dateRange: [this.getPeriousDate(), this.getNowDate()],
            dateRange2: [this.getPeriousDate(), this.getNowDate()],
            dateRange3: [this.getPeriousDate(), this.getNowDate()],
            complaintData: [],
            returnData: [],
            materialCode: null,
            dateType: '0',
            customerCode: null,
            badTypeData: [],
            timeData: {},
            supplierData: [],
            messageLoading: false,
            successLoading: false,
            NCRData: {},
            overDuceData: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 5,
            },
            pendingList: [],
            processList: [],
            detailList: [],
            activeName: 'pending',
            dateType2: '0',
            loading: false,
            total: 10,
            factoryList: [],
            factoryName: '',
            loading: false,
            hoverClear: false,
            messageList: [],
            messageParams: {
                pageNum: 1,
                pageSize: 15,
            },
            showMoreButtons: false,
            boardTime: this.getBoardDateTime(),
            timer2: null,
            timer: null,
        }
    },
    created() {
        this.getFactoryList()
        this.getList()
        this.timer = setInterval(this.getList, 30000)
        this.timer2 = setInterval(() => {
            this.boardTime = this.getBoardDateTime()
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
        this.timer = null
        clearInterval(this.timer2)
        this.timer2 = null
    },
    activated() {
        this.getList()
    },
    methods: {
        getFactoryList() {
            listAllFactory().then((res) => {
                this.factoryList = res.data
            })
        },
        supplierPpm() {
            let params = { factoryName: this.factoryName }
            if (this.dateRange2.length) {
                params.startTime = this.dateRange2[0]
                params.endTime = this.dateRange2[1]
            } else {
                params.startTime = ''
                params.endTime = ''
            }
            supplierPpm(params).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.supplierData = response.rows
                }
            })
        },
        materialChange(e) {
            console.log(e)
            this.queryParams.materialCode = e.id
            this.queryParams.materialName = e.name

            this.selectReturnList()
        },
        customerChange(e) {
            this.queryParams.customerCode = e.id
        },
        handleQuery() {
            this.getList()
        },
        resetQuery() {
            this.queryParams = {
                dateRange: [this.getPeriousDate(), this.getNowDate()],
                dataType: '1',
            }
            this.getList()
        },
        getList() {
            this.getInspection()
            this.getSecond()
            this.getTimeData()
            this.supplierPpm()
        },
        getInspection() {
            listInventory({
                pageNum: 1,
                pageSize: 10,
                factoryName: this.factoryName,
            }).then((response) => {
                if (response.code == 200 && response.rows) {
                    this.detailList = response.rows
                    this.loading = false
                }
            })
        },
        getSecond() {
            let params = {
                dateType: this.dateType,
                factoryName: this.factoryName,
            }
            if (this.dateRange.length) {
                params.startTime = this.dateRange[0]
                params.endTime = this.dateRange[1]
            } else {
                params.startTime = ''
                params.endTime = ''
            }
            getSMForTwoTimesQualifiedChart(params).then((response) => {
                if (response.code == 200) {
                    this.chartData = response.data
                }
            })
        },
        getTimeData() {
            let params = {
                dateType: this.dateType2,
                factoryName: this.factoryName,
            }
            if (this.dateRange2.length) {
                params.startTime = this.dateRange2[0]
                params.endTime = this.dateRange2[1]
            } else {
                params.startTime = ''
                params.endTime = ''
            }
            getSMForCheckInTimeChart(params).then((response) => {
                if (response.code == 200) {
                    this.timeData = response.data
                }
            })
        },
        getNowWeek() {
            var date = new Date()
            var d = date.getDay()
            let days = [
                '星期日',
                '星期一',
                '星期二',
                '星期三',
                '星期四',
                '星期五',
                '星期六',
            ]
            //  当前日期
            return days[d]
        },
        getBoardDateTime() {
            var date = new Date()
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            //  当前日期
            return (
                y +
                '-' +
                (m < 10 ? '0' + m : m) +
                '-' +
                (d < 10 ? '0' + d : d) +
                ' ' +
                date.getHours() +
                ':' +
                date.getMinutes() +
                ':' +
                date.getSeconds()
            )
        },
        getNowDate() {
            var date = new Date()
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            //  当前日期
            return (
                y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
            )
        },
        doHandleMonth(month) {
            var m = month

            if (month.toString().length == 1) {
                m = '0' + month
            }

            return m
        },
        getPeriousDate() {
            var today = new Date()
            var targetday_milliseconds =
                today.getTime() - 1000 * 60 * 60 * 24 * 7
            today.setTime(targetday_milliseconds) //注意，这行是关键代码
            var tYear = today.getFullYear()

            var tMonth = today.getMonth()

            var tDate = today.getDate()

            tMonth = this.doHandleMonth(tMonth + 1)

            tDate = this.doHandleMonth(tDate)

            return tYear + '-' + tMonth + '-' + tDate
        },
        getNowDate() {
            var date = new Date()
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            var d = date.getDate()
            //  当前日期
            return (
                y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
            )
        },
        toModule(url, status, exceedTimeStauts) {
            if (exceedTimeStauts === 'ncr') {
                this.$router.push({
                    path: url,
                    query: {
                        status: status,
                        ncr: exceedTimeStauts,
                    },
                })
            } else {
                this.$router.push({
                    path: url,
                    query: exceedTimeStauts
                        ? { exceedTimeStauts: status }
                        : {
                              status: status,
                          },
                })
            }
        },
        clearOne(row) {
            clearMessage(row.id).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess('操作成功!')
                    this.listMessage()
                }
            })
        },
        clearMessage() {
            let ids = []
            this.messageList.forEach((io) => {
                ids.push(io.id)
            })
            if (ids.length === 0) {
                return
            }
            clearMessage(ids).then((res) => {
                if (res.code === 200) {
                    this.$modal.msgSuccess('操作成功!')
                    this.listMessage()
                }
            })
        },
        listMessage() {
            this.messageLoading = true
            listMessage(this.messageParams).then((res) => {
                this.messageList = res.rows
                if (res.total > this.messageParams.pageSize) {
                    this.showMoreButtons = true
                } else {
                    this.showMoreButtons = false
                }
                this.messageLoading = false
            })
        },
        deal(scope, status, type) {
            let moduleName = scope.row.functionModule.split('：')
            console.log(moduleName[1])
            switch (moduleName[1]) {
                case '待检任务':
                    this.$router.push({
                        path: '/inspect/inventoryManagement',
                        query: {
                            uniqueId: scope.row.uniqueId,
                        },
                    })
                    break
                case '检验标准':
                    this.$router.push({
                        path: '/inspectionPlan',
                        query: {
                            uniqueId: scope.row.uniqueId,
                        },
                    })
                    break
                case '来料检验':
                    this.$router.push({
                        path: '/inspect/incoming',
                        query: {
                            uniqueId: scope.row.uniqueId,
                            status,
                            type: type,
                        },
                    })
                    break
            }
        },
        changeTab(tabType) {
            this.activeName = tabType
            this.queryParams = {
                pageNum: 1,
                pageSize: 5,
            }
            if (tabType === 'pending') {
                this.needDealtList()
            } else {
                this.processedList()
            }
        },
        needDealtList() {
            needDealtList(this.queryParams).then((res) => {
                this.pendingList = res.rows
                this.total = res.total
            })
        },
        processedList() {
            this.successLoading = true
            processedList(this.queryParams).then((res) => {
                this.processList = res.rows
                this.total = res.total
                this.successLoading = false
            })
        },
        selectBadQuality(callback) {
            let params = { ...this.queryParams }
            if (this.dateRange.length) {
                params.startDate = this.dateRange[0]
                params.endDate = this.dateRange[1]
            } else {
                params.startDate = ''
                params.endDate = ''
            }
            delete this.dateRange
            this.loading = true
            selectBadQuality(params).then((res) => {
                this.badQualityData = res.data
                this.loading = false
                callback(res)
                this.loading = false
            })
        },
        selectBadType() {
            let params = { ...this.queryParams }
            if (this.dateRange.length) {
                params.startDate = this.dateRange[0]
                params.endDate = this.dateRange[1]
            } else {
                params.startDate = ''
                params.endDate = ''
            }
            delete this.dateRange
            selectBadType(params).then((res) => {
                this.badTypeData = res.rows
            })
        },
        remarkRenderHeader(h, { column, $index }) {
            return h(
                'span',
                {
                    style: {
                        color: '#fff',
                    },
                },
                column.label
            )
        },
        fastRenderHeader(h, { column, $index }) {
            return h(
                'span',
                {
                    style: {
                        color: '#E9F05E',
                    },
                },
                column.label
            )
        },
        selectComplaint() {
            let params = { ...this.queryParams }
            if (this.dateRange.length) {
                params.beginTime = this.dateRange[0]
                params.endTime = this.dateRange[1]
            } else {
                params.beginTime = ''
                params.endTime = ''
            }
            delete this.dateRange
            selectComplaint(params).then((res) => {
                this.complaintData = res.data
            })
        },
        selectReturnList() {
            let params = { ...this.queryParams }
            if (this.dateRange.length) {
                params.beginTime = this.dateRange[0]
                params.endTime = this.dateRange[1]
            } else {
                params.beginTime = ''
                params.endTime = ''
            }
            delete this.dateRange
            selectReturnList(params).then((res) => {
                this.returnData = res.data
            })
        },
        showMore() {
            this.messageParams.pageSize += 10
            this.listMessage()
        },
        goTarget(href) {
            window.open(href, '_blank')
        },
        rowStyle({ row, rowIndex }) {
            let styleObj = {}
            if (rowIndex % 2 == 0) {
                styleObj.backgroundColor = '#294B89'
            } else {
                styleObj.backgroundColor = '#3A71C2'
            }
            if (row.sort == '1') {
                styleObj.backgroundColor = '#EC808D'
            }

            styleObj.color = '#fff'
            styleObj.border = '1px solid #0B1031'
            return styleObj
        },
        tableRowClassName({ row, rowIndex }) {
            // console.log('rowIndex', rowIndex, row)
            // if (row.isHighLight === true) {
            //     console.log('rowIndex', row)
            //     return 'rowHighLight' //若isHighLight为true，则使用“rowHighLight”样式
            // } else {
            return ''
            // }
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-table .default-bg {
    background-color: rgba(83, 88, 98, 0.08) !important;
}
::v-deep .el-table .error-bg {
    background-color: rgba(235, 86, 72, 0.08) !important;
}
::v-deep .el-table .warning-bg {
    background-color: rgba(227, 165, 11, 0.06) !important;
}
.app-container {
    padding: 0;
}
.home {
    background: #0b0f30;
    // padding: 19px 17px;
    // padding-top: 0px;
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }
    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}
.chart-card {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    background: url('~@/assets/images/board/card.png') no-repeat;
    border-right: 1px solid #0c278c;
    border-bottom: 1px solid #0c278c;
    background-size: cover;
    height: 319px;
    // border-radius: 4px;
}
::v-deep.el-table {
    background: #0b0f30;
    border: 0px !important;
}
::v-deep.el-table::before {
    height: 0px;
}
.card-title {
    height: 44px;
}
.title-left {
    height: 32px;
    font-size: 14px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #6bb8ff;
    line-height: 32px;
    padding-left: 7px;
    padding-top: 4px;
}
.summary-card {
    margin-top: 5px;

    // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    height: 80px;
    padding-top: 15px;
    padding-left: 20px;
    cursor: pointer;
}
.card-count {
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    line-height: 32px;
    color: #fff;
    line-height: 30px;
}

.card-content {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    line-height: 15px;
    margin-top: 8px;
}
.card-short {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #606266;
    line-height: 15px;
    margin-top: 8px;
}
.summary-success:hover {
    background: rgba(32, 176, 159, 0.06);
    .card-count {
        color: #20b09f;
    }
}
.summary-warning {
    background: url('~@/assets/images/home/bg2.png') no-repeat;
    background-size: cover;
}
.summary-warning:hover {
    background: url('~@/assets/images/home/bg2_hover.png') no-repeat;
    background-size: cover;
}
.summary-error {
    background: url('~@/assets/images/home/bg3.png') no-repeat;
    background-size: cover;
}
.summary-error:hover {
    background: url('~@/assets/images/home/bg3_hover.png') no-repeat;
    background-size: cover;
}
.summary-info {
    background: url('~@/assets/images/home/bg1.png') no-repeat;
    background-size: cover;
}
.summary-info:hover {
    background: url('~@/assets/images/home/bg1_hover.png') no-repeat;
    background-size: cover;
}
.home-list {
    float: left;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 20px;
}
.menu-list {
    float: left;
    height: 146px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    margin-top: 5px;
    padding: 5px 20px;
    width: 100%;
}
.container-header {
    width: 100%;
}
.header-left {
    float: left;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 40px;
    display: flex;
    justify-content: center;
    padding: 0 10px;
    cursor: pointer;
}
.title-current {
    border-bottom: 2px solid #0b7be3;
}
.container-table {
    float: left;
    margin-top: 6px;
    width: 100%;
}
.menu-img {
    width: 40px;
    height: 24px;
}
.menu-card {
    height: 64px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}
.menu-card:hover {
    background: #f5f6f8;
}
.grid-message {
    padding: 10px 20px;
    float: left;
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
}
.message-list {
    float: left;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
}
.message-list ul {
    max-height: calc(100vh - 200px);
    overflow: auto;
}
.message-list ul li {
    line-height: 36px;
    border: 1px solid #ededf2;
    border-bottom: 0px;
    // margin:0px 0px -1px 0px ;
}
.message-list ul li:last-child {
    border-bottom: 1px solid #ededf2;
    // margin:0px 0px -1px 0px ;
}

::v-deep .message-list ul li:hover {
    background: rgba(11, 123, 227, 0.08);
}
.message-description {
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
}
.message-datetime {
    padding-left: 11px;
    margin-top: 2px;
    color: #a5a5aa;
    font-size: 12px;
}
.show-more {
    display: flex;
    justify-content: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.show-more:hover {
    color: rgb(24, 144, 255);
}

.header-right {
    margin-top: 10px;
    float: right;
}
.header-right:hover {
    color: #eb5648;
    cursor: pointer;
}
.clear-img {
    width: 12px;
    height: 12px;
    margin-right: 5px;
    position: relative;
    top: 1px;
}
::v-deep .el-table td.el-table__cell {
    border-bottom: 1px solid #294b89;
}
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
    border-bottom: 1px solid #294b89;
}
.board-header {
    background: url('~@/assets/images/board/header.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
::v-deep .el-table__header-wrapper tr th {
    background: #3f81df !important;
}
::v-deep .fast .el-table__cell {
    color: #e9f05e;
}
.chart-flex {
    display: flex;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
    border: 0px !important;
    background: #0b0f30 !important;
}
::v-deep .el-range-input {
    background: #0b0f30 !important;
}
.current-date {
    width: 32px;
    height: 28px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #0b7be3;
    font-size: 12px;
    padding: 6px;
    margin-left: 5px;
}
.default-date {
    width: 32px;
    height: 28px;
    background: rgba(0, 0, 0, 0.1);
    font-size: 12px;
    padding: 6px;
    color: #fff;
    margin-left: 5px;
}
.board-time {
    font-size: 14px;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    font-weight: bold;
    color: #6bfbff;
    line-height: 17px;
    position: absolute;
    right: 107px;
}
.show-method {
    font-size: 14px;
    cursor: pointer;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    font-weight: bold;
    color: #6bfbff;
    line-height: 17px;
    position: absolute;
    right: 77px;
}
.show-factory {
    position: absolute;
    right: 320px;
    top: 18px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    border: 1px solid #0b7be3;
}
::v-deep .show-factory .el-input__inner {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    color: #fff;
    border: 1px solid #0b7be3;
}
.container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 80vh;
}
.box {
    flex-basis: 49%;
    padding: 12px;

    height: 40vh;
}
</style>

